<template>
  <el-container style="height:100%">
      <CNAsideMenu
        :asideWidth="initAsideWidth"
        :asideStyle="{backgroundColor:'#111'}"
        :menuInfo="menuInfo"
        backgroundColor="#111"
        defaultActive="/admin/TableShow"
        activeTextColor="orange"
        textColor="#00b6c6"
        @select="select"
      >
        <CNSystemTitle
          :titleHeight="headerHeight"
          :systemTitleStyle="{'color': '#00b6c6','background-color': '#00284d'}"
          :systemTitle="'陈年管理系统'"
          :systemLogo="'/src/assets/img/logo.jpg'"
        />
      </CNAsideMenu>
    <el-container style="flex-direction: column;">
        <CNHeader 
        :headerHeight="headerHeight"
        :headerStyle="{backgroundColor:'#333'}"
        :collapseStyle="{color:'black'}"
        :ifShowCollapse="true">
          <div>头部内容在插槽中写</div>
        </CNHeader>
      <el-main>
        <RouterView />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
const headerHeight = 60; // 头部高度
const initAsideWidth = 200; // 初始菜单展开的宽度
// 菜单信息
// index 路径  title 菜单标题 icon 菜单图标 childrens 子菜单
// 注:1. 目前只支持二级菜单 2.icon是组件名
const menuInfo = [
  { index: "/admin/TableShow", title: "表格展示", icon: "Pear" },
  { index: "/admin/FormShow", title: "表单展示", icon: "Menu" },
  {
    title: "子菜单",
    icon: "Dish",
    childrens: [
      { index: "/admin/SubMenu1", title: "子菜单1", icon: "Apple" },
      { index: "/admin/SubMenu2", title: "子菜单2", icon: "Food" },
    ],
  }
];
// 获取当前path路径
const select = (info) => {
  console.log(info);
};
</script>